/* 整体左上角布局 */
*
{
    padding: 0px;
    margin: 0px;
}

/* 头部logo */
#head-logo
{
    width: 900px;
    /* border: 1px black solid; */
}
#head-logo img
{
    width: 900px;
    height: 100px;
}
/* 顶端样式 */
#head,#foot
{
    height: 100px;
    width: 100%;
    background-color: rgb(112, 112, 247);
}
#head-logo
{
    width: 900px;
    background-color: red;
}

/* 页面主体部分边框样式 */
#middle
{
    /* border: 1px black solid; */
    height: 550px;
    width: 900px;
    margin: 0px auto;
    margin-top: 30px;
    /* 清除浮动 */
    /* border: black 1px solid; */
    overflow: hidden;
}
/* 两条斜杠 */
.Appearance-style-one
{
    width: 387px;
    height: 1px;
    background-color: rgb(224, 226, 226);
    margin-top: 40px;
}
/* 注册文本样式 */
.Appearance-style-two
{
    font-size: 30pt;
    margin-left: 20px;
    margin-right: 20px;
    /* border: 1px solid black; */
}
/* 登录文体外观 */
#Appearance-style
{
    height: 80px;
    /* border: 1px black solid; */
    width: 100%;
    line-height: 80px;
    margin-left: 4px;
}

<<<<<<< HEAD
/* 输入框容器样式 */
#User-interaction {
}
/*用户输入提示文本*/
#UserPhoneLabel {
    visibility:hidden;
}
/* 输入框容器样式 */
#User-interaction {
    /* border: 1px solid black; */
    height: 100%;
    width: 60%;
    margin-left: 250px;
    margin-top: 15px;
}
/* 输入框样式 */
.input-type input
{
    height: 35px;
    width: 70%;
    padding-left: 15px;
    border-radius: 5px;
    border: 1px solid rgb(189, 183, 183);
    
}
/* 输入框获得焦点事件 */
.input-type input:focus
{
    /* border: 1px solid rgb(189, 183, 183); */
    /* 取消选中时的黑色边框 */
    outline:none;
    animation-name:Input-focus;
    animation-duration: 0.5s;
    animation-fill-mode:forwards;  
}
/*输入框动画 */
@keyframes Input-focus
{
    from{}
    to{border: 1px rgb(9, 156, 201) solid;}
}
#input-type-2{
    margin-top: 40px;
}


/* 安全提示文本 */
#security{
    height: 40px;
    /* border: black solid 1px; */
    line-height: 40px;
}
#security strong
{
    visibility: hidden;
}

#security div
{
    /* border: black solid 1px; */
    height: 4px;
    margin-top: 19px;
    border-radius: 2px;
    width: 30px;
    visibility:hidden;
}
.security-color-one
{
    margin-left: 20px;
    background-color: red;
    display: block;
}
.security-color-two
{
    background-color: yellow;
    display: block;
}
.security-color-there
{
    background-color: greenyellow;
    display: block;
}
#security label
{
    margin-left: 200px;
    visibility: hidden;
    color: red;
}

/* 用户为空提示文本 */
#user-Error-message
{
    visibility: hidden;
}

/* 密码错误提示文本 */
#pwd-Error-message
{
    visibility: hidden;
}

/* 验证框 */
#input-type-3
{
    margin-top: 40px;
    position: relative;
}
/* 验证码按钮 */
#Code-button
{
    position: absolute;
    left: 273px;
    top: 2px;
    border: 1px rgb(9, 156, 201) solid;
    border-radius: 5px;
    height: 33px;
    width: 120px;
    color:white;
    background-color: rgb(9, 156, 201);
}
#Code-button:hover
{
    animation-name:Regi;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
}
#Code-button:focus
{
    outline: none;
}



/* 提示框样式 */
.input-type label
{
    color: rgb(245, 60, 131);
    font-size: 10pt;
}

/* 协议内容 */
#agreement
{
    margin-top: 12px;
    /* border: 1px solid black; */
}
#agreement input[type="checkbox"]
{
    display: none;
    /* background: red; */
}
/* 协议超链接 */
#agreement a
{
    text-decoration: none;
    margin-top: 3px;
    color: rgb(9, 156, 201);
    font-size: 5pt;
}
#tongyitxt
{
    margin-left: 5px;
}
/* 协议普通文本 */
#tongyitxt,#tongyitxt~label
{
    margin-top: 3px;
    font-size: 5pt;
}



#check-box+label
{
    /* margin-right: 10px; */
    margin-top: 3px;
    display: block;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border: 1px solid rgb(175, 175, 175);
    border-radius: 3px;
    /* position: absolute; */
    /* top: 2px;
    left: 15px; */
    background: rgb(253, 253, 253);
}
#check-box:checked+label::before
{
    border: none;
    background: rgb(9, 156, 201);
    border-radius: 2px;
    display: block;
    content: "\2714";
    text-align: center;
    height: 15px;
    font-size: 10px;
    color: white;
}
#check-box:checked+label
{
    border: 1px solid rgb(9, 156, 201);
}


/* 注册按钮通用状态 */
#RegisterButton
{
    margin-top: 15px;
    border-radius: 4px;
    height: 35px;
    width: 394px;
    font-size: 11pt;
}
#RegisterButton:focus
{
    outline: none;
    /* border: 1px black solid; */
}

/* 注册按钮状态1 */
.Register-button-one
{

    border: 1px solid  rgb(9, 156, 201);
    background:  rgb(9, 156, 201);
    color: white;
}
/* 注册按钮状态一鼠标进入 */
.Register-button-one:hover
{
    animation-name:Regi;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
}
/* 注册按钮状态2 */
.Register-button-two
{
    background:  rgb(224, 226, 226);
    color: rgb(177, 176, 176);
    border: 1px solid  grey;
    
    /* 控件穿透，无法单击 */
    /* pointer-events: none; */
    cursor: not-allowed;
}

/* 注册按钮动画 */
@keyframes Regi
{
    from{}
    to{background:  rgb(37, 187, 233);
    border:rgb(37, 187, 233) ;}
}

/* #check-box
{
    background-color: red;
} */
/* 验证码错误提示 */
#Code-Error-message
{
    visibility: hidden;
}


/* 登录跳转 */
#Login-jump
{
    margin-left: 275px;
    font-size: 5pt;
    display: block;
    margin-top: 15px;
    text-decoration: none;
    color: rgb(9, 156, 201);
}

/* 设置浮动 */
#Appearance-style,#security,#head,#agreement
{
    display: flex;
}
.grid-cell-1
{
    flex: 1;
}
.grid-cell-2
{
    flex: 2;
}
.grid-cell-3
{
    flex: 3;
}




/* 底部样式 */
#foot
{
    position: absolute;
    bottom: 0px;
    height: 150px;
    left: 0px;
    background-color: rgb(243, 250, 250);
}